<template>
  <el-card>
    <div slot="header" class="category-header">
      <span>销售额类别占比</span>
      <el-radio-group size="medium" v-model="activeName">
        <el-radio-button label="全部渠道"></el-radio-button>
        <el-radio-button label="线上"></el-radio-button>
        <el-radio-button label="门店"></el-radio-button>
      </el-radio-group>
    </div>
    <!-- 容器 -->
    <div class="charts" ref="charts"></div>
  </el-card>
</template>

<script>
// 引入echarts
import * as echarts from 'echarts'
import { mapState } from 'vuex'
export default {
  data() {
    return {
      activeName: '线上',
      piechart: null,
    }
  },
  computed: {
    ...mapState({
      listState: (state) => state.home.list,
    })
  },
  watch: {
    activeName() {
      // 饼图数据name
      // this.listState.saleRank.shop.name
      let nameList = this.listState.saleRank.shop.name
      // 饼图数据valuew
      // this.listState.saleRank.shop.value
      let valueList = this.listState.saleRank.shop.value
      let newValueList = []
      if (this.activeName == '线上') {
        nameList = this.listState.saleRank.online.name
        valueList = this.listState.saleRank.online.value
      } else if (this.activeName == '全部渠道') {
        valueList.forEach((r, i) => {
          let newValue = r + this.listState.saleRank.online.value[i]
          newValueList.push(newValue)
        })
        valueList = newValueList
      }
      // 新的饼图数据容器
      // ——————————————————————————————online饼图——————————————————————————————————
      let newArr = []
      // 通过forEach循环整合数据
      nameList.forEach((r, i) => {
        let obj = {
          value: valueList[i],
          name: r,
        }
        newArr.push(obj)
      })
      this.piechart.setOption({
        title: {
          text: '视频',
          subtext: 1048,
          left: 'center',
          top: 'center',
        },
        tooltip: {
          trigger: 'item',
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2,
            },
            label: {
              show: true,
              position: 'outsize',
            },
            labelLine: {
              show: true,
            },
            // data: [
            //   { value: 1048, name: '视频' },
            //   { value: 735, name: 'Direct' },
            //   { value: 580, name: 'Email' },
            //   { value: 484, name: 'Union Ads' },
            //   { value: 300, name: 'Video Ads' },
            // ],
            data: newArr,
          },
        ],
      })
      // 绑定事件

      this.piechart.on('mouseover', (params) => {
        // 获取鼠标移上去那条数据
        const { name, value } = params.data
        // 重新设置标题
        this.piechart.setOption({
          title: {
            text: name,
            subtext: value,
          },
        })
      })
    },
  },
  mounted() {
    // 初始化echarts实例
    // ——————————————————————————————shop饼图——————————————————————————————————
    this.piechart = echarts.init(this.$refs.charts)
    this.piechart.setOption({
      title: {
        text: '视频',
        subtext: 1048,
        left: 'center',
        top: 'center',
      },
      tooltip: {
        trigger: 'item',
      },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2,
          },
          label: {
            show: true,
            position: 'outsize',
          },
          labelLine: {
            show: true,
          },
          data: [],
        },
      ],
    })
    // 绑定事件

    this.piechart.on('mouseover', (params) => {
      // 获取鼠标移上去那条数据
      const { name, value } = params.data
      // 重新设置标题
      this.piechart.setOption({
        title: {
          text: name,
          subtext: value,
        },
      })
    })
  },
}
</script>

<style scoped>
.charts {
  width: 100%;
  height: 18.75rem;
}
.category-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
>>> .el-card__header {
  padding: 10px 20px;
}
</style>